<template>
	<view class="box">
		<view v-for="(item,index) in articleData" :key="item.id" @click="detailClick(item.id)">
			<image :src="item.cover.path"></image>
			<view>{{item.name}}</view>
		</view>
	</view>
</template>

<script>
	import {
		uniNavigateTo
	} from "@/util/index.js"
	export default {
		name: "ArticleList",
		props: {
			articleData: {
				type: Array,
				default: []
			}
		},
		methods: {
			detailClick(id) {
				uniNavigateTo(`/pages/article/articleDetail?id=${id}`);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 0 10rpx;

		>view {
			min-width: 49%;
			max-width: 49%;
			background: #fff;
			flex: 1;
			position: relative;
			margin-bottom: 30rpx;

			>image {
				width: 100%;
				height: 200rpx;
				display: block;
			}

			>view {
				width: 100%;
				padding: 10rpx 0;
				text-align: center;
				background: rgba(0, 0, 0, .3);
				position: absolute;
				left: 0;
				line-height: 24rpx;
				bottom: 0;
				font-size: 24rpx;
				color: #fff;
			}

			&:nth-child(odd) {}

			&:nth-child(even) {
				margin-left: 0;
			}
		}
	}
</style>
